<template>
      <!-- home下的关于我们 -->
    <div class="about">
        <div class="head">
            <p>关于我们</p>            
        </div>
        <main>
            <div class="page">
                <div class="main">
                    <div class="introduce">
                        <Title title="企业介绍" text="Companies to introduce"/>
                        <div class="intro-text">
                            <p>广州健康信息产业有限公司，是一家秉承中医药文化“治未病中因时因地制直治则”的理念，依托智能穿戴设备实现数据采集。在全国范围内开设体</p>
                            <p>安健康中心、结合药食同源国家目录制定专属药食方案通过家厨智能净化设备管理饮食健康，联合三甲医院全线诊疗实现慢性病管理、建设五行康养</p>
                            <p>胜地，最终以提高大众健康水平和生活品质为己任，以“倡导全民健康、创建服务品牌、经营科技产品”为经营理念，集健康产品研发、生产、销售及</p>
                            <p>健康数据采集，健康服务于体的健康大数据企业。</p>
                        </div>
                    </div>
                    <div class="consult">
                        <Title title="企业资讯" text="Business consulting"/>
                        <MySwiper2 :imgs="imgs2"/>
                    </div>
                    <button>查看更多</button>
                </div>
                <div class="foot">
                    <Title title="联系我们" text="Contact us"/>
                    <div class="address">
                        <div class="up">
                            <img src="../../img/aboutimg/map.jpg" alt="">
                        </div>
                        <div class="contact">
                    <div class="con-left">
                        <div class="con-up">
                            <h1>联系我们</h1>
                            <b>Contact us</b>
                        </div>
                        <div class="con-down">
                            <p>
                                <img src="../../img/firstimg/phone.png" alt="">
                                <span>电话</span>
                                <span>+400-1234-1234</span>
                            </p>
                            <p>
                                <img src="../../img/firstimg/e.png" alt="">
                                <span>邮箱</span>
                                <span>123456789@qq.com</span>
                            </p>
                            <p>
                                <img src="../../img/firstimg/weixin.png" alt="">
                                <span>微信</span>
                                <span>123-1234-5678</span>
                            </p>
                            <p>
                                <img src="../../img/firstimg/dingwei.png" alt="">
                                <span>广州市黄埔区科学域科学大道科汇三街4号401房</span>
                            </p>
                        </div>
                    </div>
                    <div class="con-right">
                        <input type="text" placeholder="名字">
                        <input type="text" placeholder="邮箱">
                        <input type="text" placeholder="电话">
                        <textarea placeholder="内容"></textarea>
                        <button>提交</button>
                    </div>
                </div>
                    </div>
                </div>
            </div>  
        </main>       
    </div>
</template>

<script>
import MySwiper from '../../components/MySwiper'
import MySwiper2 from '../../components/MySwiper2'
import Title from '../../components/Title'
import img1 from '../../img/aboutimg/bg.jpg'
export default {
    components:{
        MySwiper,
        MySwiper2,
        Title
    },
    data(){
        return {
            imgs:[img1],
            imgs2:[img1,img1,img1,img1,img1,img1]
        }
    }
}
</script>

<style lang='scss' scoped>
.about{
    width: 100%;
}
.head{
    width: 100%;
    height: 700px;
    background: url(../../img/aboutimg/bg.jpg) no-repeat;
    background-size: 100%;
    text-align: center;
    padding-top: 160px;
    p{
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 50px;
        position: relative;
        &:after{
            content: "";
            background: #fff;
            position: absolute;
            width: 80px;
            height: 4px;
            left: 50%;
            margin-left: -40px;
            top: 100px;
        }
    }
}
main{
    width: 100%;
    z-index: 2;
    background: #2b45a4;
    position: relative;
    &::before{
        content: "";
        position: absolute;
        width: 120%;
        height: 400px;
        border-radius: 50%;
        left: -10%;
        top: -260px;
        background: #2b45a4;
        z-index: -1;
    }
}
.main{
    width: 100%;
    // background:#304fba;
    padding: 100px 0;
    .introduce{
        width: 100%;
        text-align: center;
        .intro-text{
            display: flex;
            flex-direction: column;
            p{
                width: 100%;
                text-align: center;
                color: white;
                font-size: 18px;
                margin-top: 30px;
            }
        }
    }
    .consult{
        width: 100%;
        margin-top: 200px;
    }
    button{
        display: block;
        width: 346px;
        height: 70px;
        outline: none;
        border: none;
        // border-radius: 5px;
        margin: 0 auto;
        background: #446cfe;
        color: white;
        cursor: pointer;
        margin-top: 140px;
        font-size: 20px;
        &:hover{
            background: crimson;
        }
    }
}
.foot{
    width: 100%;
    background: #2b45a4;
    display: flex;
    flex-direction: column;
    margin-top: 160px;
    p{
        text-align: center;
    }
}
.address{
    display: flex;
    flex-direction: column;
}
.up{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.down{
    display: flex;
    flex-direction: column;
    input{
        height: 30px;
        border: 1px solid;
    }
    .down-up{
        display: flex;
        justify-content: space-around;
    }
    .area{
        resize: none;
        width: 100%;
        height: 100px;
        border: 1px solid;
    }
    button{
        width: 120px;
        height: 40px;
        outline: none;
        border: none;
        margin: 0 auto;
        background: rgb(127, 150, 216);
        color: white;
        
    }
}
.contact{
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-right: 60px;
    margin-top: 174px;
    padding-bottom: 200px;
    .con-left{
        width: 400px;
        height: 330px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .con-up{
            h1{
                font-size: 38px;
                font-weight: bold;
                color: white;
            }
            b{
                font-size: 20px;
                color: white;
                margin-top: 10px;
            }
        }
        .con-down{
            margin-top: 14px;
            p{
                display: flex;
                align-items: center;
                margin-top: 16px;
                img{
                    width: 25px;
                }
                span{
                    font-size: 16px;
                    font-weight: bold;
                    margin-left: 10px;
                    color: white;
                }
            }
        }
    }
    .con-right{
        width: 440px;
        height: 330px;
        display: flex;
        flex-direction: column;
        input{
            height: 40px;
            margin-bottom: 10px;
            background: #4867d9;
             padding-left: 10px;
            &::placeholder{
                color: #a8b3ea;
                font-size: 18px;
            }
        }
        textarea{
            height: 120px;
            resize: none;
            background: #4867d9;
            padding-left: 10px;
            &::placeholder{
                color: #a8b3ea;
                font-size: 18px;
            }
        }
        button{
            height: 50px;
            margin-top: 20px;
            background: #486fff;
            outline: none;
            border: none;
            color: white;
            font-size: 20px;
        }
    }
}
</style>